<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <system-role :formData="formData" @success="handleSaveSuccess"></system-role>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleRoleMenu">
      <system-role-menu :tree="tree" :role="manageRole" @success="handleSaveSuccessRoleMenu"></system-role-menu>
    </el-dialog>

    <div class="flex_head">
      <span class="solid"></span>
      <span class="item_two">
        <el-button type="primary" @click="handleSave(undefined)">添加角色</el-button>
      </span>
    </div>
    <el-row>
      <el-table border :data="page.list">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="name" label="角色" align="center"></el-table-column>
        <el-table-column prop="description" label="描述" align="center"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope" >
            <el-button type="text" size="small" @click="handleSave(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" @click="handleRoleMenuManage(scope.row)">功能管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="text-align: right;padding-right: 15px">
      <el-pagination @current-change="loadTable" :current-page.sync="page.pageNumber" :page-size="page.pageSize" layout="prev, pager, next, jumper, total" :total="page.totalRow">
      </el-pagination>
    </el-row>
    <!--<div class="block" style="padding: 15px;text-align: right">-->
      <!--<el-pagination-->
        <!--background-->
        <!--@size-change="handleSizeChange"-->
        <!--@current-change="loadTable"-->
        <!--:current-page="page.pageNumber"-->
        <!--:page-sizes="[5, 8, 10, 13, 15]"-->
        <!--:page-size="page.pageSize"-->
        <!--layout="total, sizes, prev, pager, next, jumper"-->
        <!--:total="page.totalRow">-->
      <!--</el-pagination>-->
    <!--</div>-->
  </div>
</template>

<script>
  import Role from './role.vue'
  import RoleMenu from './roleMenu.vue'

  export default {
    name: 'RoleIndex',
    components: {
      'system-role': Role,
      'system-role-menu': RoleMenu
    },
    data: function() {
      return {
        page: {},
        dialogVisible: false,
        dialogVisibleRoleMenu: false,
        formData: {},
        tree: {},
        manageRole: {},
        pageSize:10,
        pageNumber:1,
        total:1
      }
    },
    methods: {
      loadTable: function(number) {

        let params ={
          pageSize:this.pageSize,
          pageNumber :number
        }
        this.$api.getRoleList(params).then(res =>{
          if(res.code == '000000'){
           this.$message.success("获取角色列表成功")
            this.page = res.data;
          }
        }).catch(()=>{
          this.$message.error("获取角色列表失败")
        })
      },
      handleSizeChange (val) {
        this.loadTable(val)
      },
      handleSave: function(data) {
        if (data) {
          this.formData = data
        } else {
          this.formData = { name: undefined, description: undefined }
        }
        this.dialogVisible = true
      },
      handleDelete: function(id) {
        this.$confirm('确定删除这个角色？', '删除角色', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$api.deleteRole(id).then(res =>{
            if(res.code == '000000'){
              this.$message.success('删除成功')
              this.loadTable(1)
            }
          })
        }).catch(() => { })
      },
      handleRoleMenuManage: function(row) {

        this.$api.getMenuRoleList(row.id).then(res =>{
           this.tree = res.data;
          this.manageRole = row
          this.dialogVisibleRoleMenu = true
        })
      },
      handleSaveSuccess: function() {
        this.dialogVisible = false
        this.loadTable(1)
      },
      handleSaveSuccessRoleMenu: function() {
        this.dialogVisibleRoleMenu = false
        this.loadTable(1)
      }
    },
    created: function() {
      this.loadTable(1)
    }
  }
</script>

<style>

</style>
